<!--
  ~ Copyright (c) Jack魏 2023 - 2024, All Rights Reserved.
  -->

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keywords" content="Layui登录,yiyi-web登录页面,后台管理系统,权限系统">
  <link rel="icon" th:href="@{/images/yiyi.ico}" type="image/x-icon">
  <meta name="description" content="注册页面">
  <meta name="author" content="Jack魏">
  <title>注册</title>
  <!-- layui -->
  <link type="text/css" rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
  <script type="text/javascript" th:src="@{/layui/layui.js}" charset="utf-8"></script>
  <!-- jQuery -->
  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
  <!-- CSS -->
  <link type="text/css" rel="stylesheet" th:href="@{/css/index.css}" media="all"/>
</head>
<body>
<p class="home-title">
  YiYi Web 注册
</p>
<form class="layui-form layui-text">
  <div class="index-container">
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-user"></i>
        </div>
        <input type="text" name="account" value="" lay-verify="required" placeholder="账号" autocomplete="off"
               class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-row">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-cellphone"></i>
          </div>
          <input type="text" name="phone" value="" lay-verify="required|phone" placeholder="手机号"
                 lay-reqtext="请填写手机号" autocomplete="off" class="layui-input" id="reg-cellphone">
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" name="userName" value="" lay-verify="required" placeholder="昵称" autocomplete="off"
               class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" name="password" value="" lay-verify="required" placeholder="密码"
               autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword"
               placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-row">
        <div class="layui-col-xs5">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-vercode"></i>
            </div>
            <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码"
                   lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
          </div>
        </div>
        <div class="layui-col-xs5">
          <div style="margin-left: 10px;">
            <img id="captchaKey">
          </div>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="同意">
      <a href="agreement" target="_blank" style="position: relative; top: 6px; left: -15px;">
        <ins>用户协议</ins>
      </a>
    </div>
    <div class="layui-form-item">
      <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="reg">注册</button>
    </div>
    <div class="layui-form-item index-other">
      <a href="login">登录已有帐号</a>
    </div>
  </div>
</form>

<script>
  layui.use(function () {
    var form = layui.form;
    var layer = layui.layer;

    // 验证码
    var captchaKey = new Date().getTime();
    lay('#captchaKey').attr('src', 'index/getCaptcha?key=' + captchaKey);
    $('#captchaKey').click(function () {
      captchaKey = new Date().getTime();
      $('#captchaKey').attr('src', 'index/getCaptcha?key=' + captchaKey);
    })

    // 自定义验证规则
    form.verify({
      // 确认密码
      confirmPassword: function (value, item) {
        var passwordValue = $('#reg-password').val();
        if (value !== passwordValue) {
          return '两次密码输入不一致';
        }
      }
    });

    // 提交事件
    form.on('submit(reg)', function (data) {
      var params = data.field; // 获取表单字段值
      delete params.confirmPassword;

      // 是否勾选同意
      if (!params.agreement) {
        layer.msg('您必须勾选同意用户协议才能注册');
        return false;
      }

      params.captchaKey = captchaKey;
      console.log(params)

      $.ajax({
        type: 'POST', // 请求类型
        async: true, // 默认true,异步
        data: JSON.stringify(params), // 请求参数
        dataType: 'json', // 数据类型
        contentType: 'application/json;charset=utf-8', // 发送的数据类型
        url: 'index/register', // 请求URL
        success: function (data) {
          if (data.code === 200) {
            layer.msg(data.message, {icon: 6});
            // 成功后等待2秒，跳转到登录页面
            setTimeout(function () {
              window.location.href = 'login'
            }, 2000);
          } else {
            layer.msg(data.message, {icon: 5});
          }
        }, error: function (XMLHttpRequest, textStatus, errorThrown) {
          layer.msg('服务器内部错误！', {icon: 2});
        }
      });

      return false; // 阻止默认 form 跳转
    });
  });
</script>

</body>
</html>